<template>
  <div class="panel">
    <div class="table-container">
      <table class="warning-table">
        <thead>
          <tr>
            <th>设备名称</th>
            <th>警告原因</th>
            <th>时间</th>
            <th>等级</th>
          </tr>
        </thead>
        <tbody ref="tbodyRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
          <tr v-for="(item, index) in displayData" :key="index">
            <td>{{ item.deviceName }}</td>
            <td>{{ item.reason }}</td>
            <td>{{ item.time }}</td>
            <td>
              <span class="status" :class="item.status">{{ item.statusText }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const tbodyRef = ref<HTMLElement | null>(null)
let scrollInterval: number | null = null

// 模拟数据
const warningData = ref([
  { 
    deviceName: '气象站', 
    reason: '连接中断', 
    time: '04-03 15:05:36', 
    status: 'normal', 
    statusText: '正常'
  },
  { 
    deviceName: '灌溉系统1号', 
    reason: '电量低', 
    time: '04-03 14:50:18', 
    status: 'warning', 
    statusText: '警告'
  },
  { 
    deviceName: '气象站', 
    reason: '压力异常', 
    time: '04-03 14:25:33', 
    status: 'urgent', 
    statusText: '紧急'
  },
  { 
    deviceName: '温室3号', 
    reason: '连接中断', 
    time: '04-03 13:40:57', 
    status: 'notice', 
    statusText: '注意'
  }
])

// 复制数据以实现无限循环
const displayData = ref([...warningData.value, ...warningData.value])

// 开始自动滚动
const startAutoScroll = () => {
  if (!tbodyRef.value) return
  
  let scrollTop = 0
  const rowHeight = 40 // 每行高度
  const singleHeight = rowHeight * warningData.value.length // 单次滚动高度
  
  scrollInterval = window.setInterval(() => {
    scrollTop += 1
    if (scrollTop >= singleHeight) {
      scrollTop = 0
    }
    tbodyRef.value!.scrollTop = scrollTop
  }, 24) // 每24ms滚动1px
}

// 添加鼠标悬停暂停功能
const handleMouseEnter = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
    scrollInterval = null
  }
}

const handleMouseLeave = () => {
  if (!scrollInterval) {
    startAutoScroll()
  }
}

onMounted(() => {
  startAutoScroll()
})

onUnmounted(() => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
})
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(18, 161, 127, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.table-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.warning-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

.warning-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(18, 161, 127, 0.2);
  display: table;
  width: 100%;
}

.warning-table th {
  padding: 10px;
  text-align: left;
  color: #33ffd0;
  font-weight: normal;
  border-bottom: 1px solid rgba(51, 255, 208, 0.3);
}

.warning-table th:nth-child(1),
.warning-table td:nth-child(1) {
  width: 120px;  /* 设备名称列 */
}

.warning-table th:nth-child(2),
.warning-table td:nth-child(2) {
  width: 140px;  /* 警告原因列 */
}

.warning-table th:nth-child(3),
.warning-table td:nth-child(3) {
  width: 140px;  /* 时间列 */
}

.warning-table th:nth-child(4),
.warning-table td:nth-child(4) {
  width: 80px;  /* 等级列 */
  text-align: center;
}

.warning-table tbody {
  display: block;
  height: 240px; /* 固定可见区域高度 */
  overflow: hidden;
  position: relative;
}

.warning-table tbody tr {
  display: table;
  width: 100%;
  height: 48px;
  position: relative;
}

.warning-table tbody tr:hover {
  background: rgba(51, 255, 208, 0.1);
}

.warning-table td {
  padding: 10px;
  color: #fff;
  border-bottom: 1px solid rgba(51, 255, 208, 0.1);
}

.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.status.urgent {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

.status.warning {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.status.normal {
  background: rgba(144, 147, 153, 0.2);
  color: #909399;
}

.status.notice {
  background: rgba(64, 158, 255, 0.2);
  color: #409EFF;
}

.icon {
  display: none;
}

/* 自定义滚动条样式 */
.warning-table tbody::-webkit-scrollbar {
  width: 6px;
}

.warning-table tbody::-webkit-scrollbar-track {
  background: rgba(51, 255, 208, 0.1);
  border-radius: 3px;
}

.warning-table tbody::-webkit-scrollbar-thumb {
  background: rgba(51, 255, 208, 0.3);
  border-radius: 3px;
}

.warning-table tbody::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 255, 208, 0.5);
}
</style> 